<style include="cr-shared-style settings-shared cr-icons">
  #container {
    align-items: center;
    border-bottom: var(--card-separator);
    color: var(--cros-text-color-primary);
    display: flex;
    flex-direction: row;
    font-weight: 400;
    height: 48px;
    padding: 0;
  }

  #appTitle {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #appToggle {
    margin-inline-end: 20px;
  }

  #appIcon {
    height: 32px;
    margin-inline-end: 20px;
    margin-inline-start: 24px;
    width: 32px;
  }

  cr-policy-indicator {
    padding-inline-end: var(--settings-controlled-by-spacing);
  }
</style>
<div id="container" class="cr-row" on-click="onNotificationRowClicked_"
    actionable>
  <img id="appIcon" src="chrome://app-icon/[[app.id]]/64"
      alt="[[app.title]] app icon." aria-hidden="true">
  <div id="appTitle" aria-hidden="true">[[app.title]]</div>
  <template is="dom-if" if="[[app.notificationPermission.isManaged]]">
    <cr-policy-indicator indicator-type="devicePolicy"></cr-policy-indicator>
  </template>
  <cr-toggle id="appToggle" disabled="[[app.notificationPermission.isManaged]]"
      checked="[[checked_]]"
      on-click="onNotificationRowClicked_"
      aria-labelledby="appTitle">
  </cr-toggle>
</div>